import Icon from '@/components/Icon';
import styled from '@emotion/styled';
import { t } from 'i18next';
import React, { useMemo } from 'react';

interface AuthorizationTipsProps {
	status: 'idle' | 'permission' | 'publish' | 'published' | 'joining';
	size?: number;
}

const AuthorizationTipsContainer = styled.div`
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: #383e54;
	.icon-widget-videoa {
		color: #fff;
	}
`;

const InstructionsSpan = styled.span`
	font-family: simsun;
	display: inline-block;
	width: 1.5em;
	vertical-align: bottom;
	overflow: hidden;
	animation: dot 3s infinite step-start;
	@keyframes dot {
		0% {
			width: 0;
			margin-right: 1.5em;
		}
		33% {
			width: 0.5em;
			margin-right: 1em;
		}
		66% {
			width: 1em;
			margin-right: 0.5em;
		}
		100% {
			width: 1.5em;
			margin-right: 0;
		}
	}
`;

const TipsContainer = styled.p`
	color: #fff;
	font-size: 12px;
`;

const AuthorizationTips = (props: AuthorizationTipsProps) => {
	const { status, size = 24 } = props;
	const getTips = useMemo(() => {
		if (status === 'permission') {
			return t('waitting-authorization');
		}

		if (status === 'publish') {
			return t('connecting-picture');
		}
		if (status === 'idle') {
			return t('waiting-init');
		}
		if (status === 'joining') {
			return t('waiting-join-room');
		}
		return null;
	}, [status]);

	return (
		<AuthorizationTipsContainer>
			<Icon classname={'icon-widget-videoa'} styles={{ fontSize: size + 'px' }}></Icon>
			<TipsContainer>
				{getTips}
				<InstructionsSpan>...</InstructionsSpan>
			</TipsContainer>
		</AuthorizationTipsContainer>
	);
};

export default AuthorizationTips;
